<template>
  <div class="control-group">
    <el-button-group>
      <el-tooltip
        class="item"
        effect="dark"
        :content="$t('tools.btnDownload')"
      >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-download"
          circle
          @click="downloadPdf"
        >
        </el-button>
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        :content="langTips"
      >
        <el-button
          type="primary"
          size="small"
          circle
          @click="changeLang"
        >
          {{ langText }}
        </el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { Button, Tooltip, ButtonGroup } from 'element-ui'
export default {
  name: 'control-lang',
  components: {
    'el-button': Button,
    'el-tooltip': Tooltip,
    'el-button-group': ButtonGroup,
  },
  data() {
    return {
      langText: 'En',
    }
  },

  computed: {
    langTips() {
      let lang = localStorage.getItem('language') || 'zh'
      if (lang === 'zh') {
        return this.$t('tools.btnLangTips') + '英文版'
      } else if (lang === 'en') {
        return this.$t('tools.btnLangTips') + 'Chinese'
      }
    },
  },

  mounted() {
    let lang = localStorage.getItem('language')
    if (lang === 'zh') {
      this.langText = 'En'
    } else {
      this.langText = '中'
    }
  },

  methods: {
    downloadPdf() {
      let $el = document.createElement('a')
      $el.href = 'http://resume.fridolph.wang/web-fuyinsheng-3years.pdf'
      $el.target = '_blank'
      $el.download = `付寅生-前端-本科3年.pdf`
      document.body.appendChild($el)
      $el.click()
      document.body.removeChild($el)
    },

    changeLang() {
      let lang = localStorage.getItem('language')
      if (lang === 'zh') {
        this.langText = '中'
        this.refreshPage('en')
      } else {
        this.langText = 'En'
        this.refreshPage('zh')
      }
    },

    refreshPage(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('language', lang)
      window.location.reload()
    },
  },
}
</script>

<style lang="stylus" scoped>
.resume-container
  position relative
  .control-group
    position absolute
    right 10px
    top 10px
    z-index 999
</style>
